<script setup lang="ts">
  import { ref, watch, defineEmits } from 'vue';
  import { useBooleanStore } from '@/store';
  import TopInput from './components/top-input.vue';
  import TopTable from './components/top-table.vue';
  import AddLocation from './components/add-location.vue';
  import EditLocation from './components/edit-location.vue';
  import GkLog from './components/gklog.vue';

  const booleanStore = useBooleanStore();
  const loading = ref<boolean>(false);
  const emit = defineEmits(['updateTableData']);
  const tableData = ref('');
  watch(
    tableData,
    () => {
      emit('updateTableData', tableData.value);
    },
    { deep: true }
  );
  watch(
    () => booleanStore.boolValue,
    (value) => {
      loading.value = value;
    }
  );
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">零件退货</div>
      </template>
      <div class="content">
        <a-spin dot :loading="loading" tip="接收中...">
          <TopInput @update-array="tableData = $event" />
          <a-divider />
          <TopTable :table-data="tableData" />
        </a-spin>
      </div>
      <AddLocation />
      <EditLocation />
    </a-card>
    <GkLog />
  </div>
</template>

<style scoped>
  .flow-query {
    margin: 0px;
    padding: 10px;
    height: 100%;
  }
  .card-title {
    font-size: 24px;
  }
  .content {
    display: flex;
    flex-direction: column;
  }
</style>
